<template>
  <div class="wrapper">
    <div class="list-wrapper van-hairline--bottom">
      <div class="list-left">
        <span class="title">
          申请提现
        </span>
        <span class="prices">
          -{{ expensesList.ExpensesAmount }}
        </span>
        <span class="times">
          申请时间：{{ expensesList.DateTime }}
        </span>
      </div>
      <div class="list-right">
        <span
          class="current-state"
          :class="classlists[expensesList.State - 1]"
        >
          {{ classState[expensesList.State - 1] }}
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['expensesList'],
  data () {
    return {
      classlists: ['audits', 'audit-success'],
      classState: ['处理中', '提现成功'],
    }
  },
})
</script>

<style scoped lang="scss">
.wrapper {
  font-size: 0;
  background: #fff;
  .list-wrapper {
    height: 174px;
    display: flex;
    justify-content: space-between;
    padding: 0 34px;
    font-size: 32px;
    .list-left {
      padding-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title {
        margin-bottom: 16px;
        color: #333333;
      }
      .prices {
        color: #ba2401;
      }
      .times {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 22px;
        color: #999999;
      }
    }
    .list-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .current-state {
        font-size: 30px;
        &.audits {
          color: #333;
        }
        &.audit-success {
          color:$primary-web;
        }
      }
      .btns {
        width: 130px;
        height: 50px;
        margin-top: 30px;
        text-align: center;
        line-height: 50px;
        font-size: 24px;
        color: $primary-web;
        border: 1px solid $primary-web;
      }
    }
  }
}
</style>
